<script setup lang="ts">
import footerBtn from "@/components/footerBtn/index.vue";
import { JumpPath, Tips } from "@/utils/index";
import { useTheme } from "@/composables/useTheme";
import {
  businessTradeTime,
  timeSetWay,
  setStatus,
  timeGetList,
  timeSet,
  getDetails,
  timeDelete,
  setHoliday,
} from "@/api/businessTime";
import saveUserInfoToLocation from "@/composables/saveUserInfoToLocation";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import hideWechatMenu from "@/composables/hideWechatMenu";
import Cache from "@/utils/cache";
import { USER_INFO, LOGIN_STATUS } from "@/config/cache";
onShow(() => {
  hideWechatMenu();
});
onReady(() => {
  hidePageNavInWechatBrowser();
});
onLoad(() => {
  const userInfo = Cache.get(USER_INFO, true);
  console.log(userInfo, "userInfo");
  is_business_holiday.value = !!+userInfo.is_business_holiday;
  getTimeHandler();
  getTimeList();
});
function getTimeHandler() {
  businessTradeTime().then((res) => {
    const data = res.data;
    const is_business_way = data.is_business_way;
    current.value = radioList.value.findIndex(
      (item) => item.value == is_business_way
    );
    switchValue.value = !!data.is_business_status;
  });
}
function getTimeList() {
  const params = {
    page: 1,
    limit: 20,
  };
  timeGetList(params).then((res) => {
    timeList.value = res.data.list;
  });
}
function getTimeDetailHandler() {
  const params = { id: timeId.value };
  getDetails(params).then((res) => {
    const data = res.data;
    const week_arr = data.week_arr.map((item) => +item);

    tabList.value.forEach((item) => {
      console.log(item.id);
      console.log(week_arr.includes(item.id));

      if (week_arr.includes(item.id)) {
        item.checked = true;
      }
    });
    time1.value = data.start_time;
    time2.value = data.end_time;
  });
}
let timeId = ref(null);
function timeSetHandler() {
  const params = {
    id: timeId.value,
    start_time: time1.value,
    end_time: time2.value,
    week: checkWeekArr()
      .map((item) => item.id)
      .join(","),
  };
  console.log(params, "参数");

  timeSet(params).then((res) => {
    Tips({
      title: res.info,
      success: () => {
        close();
        getTimeList();
      },
    });
  });
}
function setWayHanlder() {
  const params = {
    is_business_way: radioList.value[current.value].value,
  };
  timeSetWay(params).then((res) => {
    saveUserInfoToLocation(res.data.business);
  });
}
const { colorStyle } = useTheme();
let current = ref(0);
const radioList = ref([
  {
    name: "自动设置",
    value: "1",
  },
  {
    name: "手动设置",
    value: "2",
  },
]);
function radioChange(evt: any) {
  for (let i = 0; i < radioList.value.length; i++) {
    if (radioList.value[i].value === evt.detail.value) {
      current.value = i;
      break;
    }
  }
  setWayHanlder();
  console.log(radioList.value[current.value]);
}
function submitHandler() {
  const params = {
    is_business_status: switchValue.value ? 1 : 0,
  };
  setStatus(params).then((res: any) => {
    Tips({ title: res.info });
  });
  console.log("确认点击");
}
let switchValue = ref(true);
let timeList = ref([]);
function delHandler(item: any) {
  timeId.value = item.id;
  uni.showModal({
    title: "提示",
    content: "确定要删除吗？",
    success: function (res) {
      if (res.confirm) {
        delTimeHandler();
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
}
function delTimeHandler() {
  const params = { id: timeId.value };
  console.log(params, "删除id");

  timeDelete(params).then((res: any) => {
    Tips({
      title: res.info,
      success: () => {
        getTimeList();
      },
    });
  });
}
function addTimeHandler() {
  initData();
  open();
}
// 创建响应式数据
let show = ref(false);

// 定义方法
function open() {
  // 打开逻辑，比如设置 show 为 true
  show.value = true;
  // console.log('open');
}

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  // console.log('close');
}
let tabCurrent = ref(0);
let tabList = ref([
  {
    id: 1,
    week: "周一",
    checked: false,
  },
  {
    id: 2,
    week: "周二",
    checked: false,
  },
  {
    id: 3,
    week: "周三",
    checked: false,
  },
  {
    id: 4,
    week: "周四",
    checked: false,
  },
  {
    id: 5,
    week: "周五",
    checked: false,
  },
  {
    id: 6,
    week: "周六",
    checked: false,
  },
  {
    id: 0,
    week: "周日",
    checked: false,
  },
]);

function changeTab(item: any) {
  item.checked = !item.checked;
  console.log(tabList.value, "----");
}

let timeShow1 = ref(false);
let time1 = ref("");
function bindTimeChange1(e) {
  time1.value = e.value;
  console.log(e, "----");
  closeTime1();
}
function closeTime1() {
  timeShow1.value = false;
}
let timeShow2 = ref(false);
let time2 = ref("");
function bindTimeChange2(e) {
  time2.value = e.value;
  closeTime2();
}
function closeTime2() {
  timeShow2.value = false;
}
function isCheckWeek() {
  return tabList.value.some((item) => item.checked);
}
function addHandler() {
  if (!isCheckWeek()) return Tips({ title: "请选择日期" });
  if (!time1.value || !time2.value) return Tips({ title: "请选择时间" });
  timeSetHandler();
}
function initData() {
  tabCurrent.value = 0;
  time1.value = "";
  time2.value = "";
  timeId.value = "";
  tabList.value.forEach((item) => {
    item.checked = false;
  });
}
let editIndex = ref(-1);
function editHandler(item, index) {
  timeId.value = item.id;
  editIndex.value = index;
  getTimeDetailHandler();

  open();
}
function checkWeekArr() {
  return tabList.value.filter((item) => item.checked);
}
let is_business_holiday = ref(false);
function switchChange(e) {
  console.log(is_business_holiday.value, "111");
  const params = { is_business_holiday: e ? 1 : 0 };
  setHoliday(params).then((res) => {
    saveUserInfoToLocation(res.data.business);
  });
}
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view class="set_item mgt16">
      <view class="title blod_class">设置方式</view>
      <radio-group @change="radioChange" class="radio_group">
        <label
          class="radio_item flex_sb"
          v-for="(item, index) in radioList"
          :key="item.value"
        >
          <view>
            <view class="text1">{{ item.name }}</view>
            <view class="text2" v-if="item.value == 1">
              系统按设置时间切换“营业中/暂停营业状态”
            </view>
            <view class="text2" v-else>
              根据实际情况,手动管理企业的营业状态
            </view>
          </view>
          <view>
            <radio
              color="var(--view-theme)"
              :value="item.value"
              :checked="index === current"
            />
          </view>
        </label>
      </radio-group>
    </view>
    <view class="set_item" v-if="radioList[current].value == 2">
      <view class="title blod_class">营业状态</view>
      <view class="switch_box flex_sb">
        <text class="title">当前营业状态</text>
        <ca-switch
          v-model="switchValue"
          :size="44"
          chute-color="rgb(178, 189, 194)"
          chute-sel-color="var(--view-theme)"
          on-text="开盘"
          off-text="闭盘"
          text-color="#fff"
        />

        <!-- <up-switch
          inactiveColor="rgb(178, 189, 194)"
          activeColor="var(--view-theme)"
          size="20"
          v-model="switchValue"
          @change="switchChange"
        ></up-switch> -->
      </view>
    </view>
    <template v-else>
      <view class="set_item">
        <view class="switch_box flex_sb">
          <text class="title">是否默认周日和节假日闭盘</text>

          <up-switch
            inactiveColor="rgb(178, 189, 194)"
            activeColor="var(--view-theme)"
            size="20"
            v-model="is_business_holiday"
            @change="switchChange"
          ></up-switch>
        </view>
      </view>
      <view class="set_item">
        <view class="title blod_class">营业时间</view>
        <view class="time_list">
          <view
            class="time_item flex_sb"
            v-for="(item, index) in timeList"
            :key="index"
            @click="editHandler(item, index)"
          >
            <view>
              <view class="week_class line1">
                {{ item.name }}
              </view>
              <view> {{ item.start_time }}-{{ item.end_time }} </view>
            </view>

            <text
              class="iconfont icon-shanchu"
              @click.stop="delHandler(item)"
            ></text>
          </view>
        </view>
      </view>
    </template>
    <view class="uni-p-b-98"></view>
    <footerBtn
      v-if="radioList[current].value == 1"
      title="添加营业时间"
      @submitHandler="addTimeHandler"
    />
    <footerBtn v-else @submitHandler="submitHandler" />

    <up-popup :show="show" @close="close" @open="open" :zIndex="100" round="20">
      <view class="pop_box">
        <view class="title"> 营业设置 </view>
        <view class="info">
          <view class="tab_list">
            <view
              class="tab_item pad1020"
              :class="{ active: item.checked }"
              v-for="(item, index) in tabList"
              :key="index"
              @click="changeTab(item)"
            >
              {{ item.week }}
            </view>
          </view>
          <view class="pop_time flex_sb">
            <view
              class="time_pop_item"
              closeOnClickOverlay
              @click="timeShow1 = true"
            >
              {{ time1 || "开始时间" }}
            </view>

            <view class="line"></view>
            <view class="time_pop_item" @click="timeShow2 = true">
              {{ time2 || "结束时间" }}
            </view>
          </view>
        </view>
        <view class="theme_btn" @click="addHandler">
          <text v-if="timeId">确认修改</text>
          <text v-else>确认新增</text>
        </view>
      </view>
    </up-popup>
    <up-datetime-picker
      :show="timeShow1"
      v-model="time1"
      mode="time"
      @confirm="bindTimeChange1"
      @cancel="closeTime1"
      @close="closeTime1"
    >
    </up-datetime-picker>
    <up-datetime-picker
      :show="timeShow2"
      v-model="time2"
      mode="time"
      @confirm="bindTimeChange2"
      @cancel="closeTime2"
      @close="closeTime2"
    >
    </up-datetime-picker>
  </view>
</template>

<style scoped lang="scss">
.wrap {
  .pop_box {
    padding-bottom: 50rpx;
    border-radius: 20rpx;
    text-align: center;
    padding-top: 47rpx;
    background: rgba(248, 248, 248, 1);
    .title {
      margin-bottom: 55rpx;
      font-size: 34rpx;
      color: rgba(46, 46, 46, 1);
    }
    .info {
      margin-bottom: 200rpx;
      .pop_time {
        position: relative;
        background: #fff;
        width: 670rpx;
        margin: 0 auto;
        padding: 30rpx 0;
        border-radius: 11rpx;
        .time_pop_item {
          flex-grow: 1;
          color: rgba(125, 136, 140, 1);
          font-size: 28rpx;
        }
        .line {
          width: 2rpx;
          height: 60rpx;
          background: rgba(244, 243, 243, 1);
        }
      }

      .tab_list {
        padding: 0 66rpx;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20rpx;
        margin-bottom: 60rpx;
        .tab_item {
          background: #fff;
          border-radius: 11rpx;
          font-size: 30rpx;
          color: rgba(46, 46, 46, 1);
        }
        .active {
          background: var(--view-theme);
        }
      }
    }
  }
  .add_class {
    width: fit-content;
    margin: 40rpx auto;
    font-size: 30rpx;
    color: #272636;
    .iconfont {
      font-size: 35rpx;
      margin-right: 10rpx;
    }
  }
  .time_list {
    background: #fff;
    .time_item {
      margin-bottom: 20rpx;

      padding: 20rpx 40rpx;
      border-radius: 11rpx;
      overflow: hidden;
      font-size: 28rpx;
      color: rgba(39, 38, 54, 1);
      line-height: 50rpx;
      .week_class {
        flex: 0 0 300rpx;
        // width: 300rpx;
        overflow: hidden;
        white-space: nowrap;
      }
      .week_split {
        margin: 0 5rpx;
      }
      .iconfont {
        font-size: 30rpx;
      }
    }
  }
  .set_item {
    color: rgba(39, 38, 54, 1);
    font-size: 30rpx;
    .switch_box {
      background: #fff;
      padding-right: 40rpx;
      .title {
        font-size: 30rpx;
      }
    }
    .title {
      padding: 0 40rpx;
      height: 80rpx;
      line-height: 80rpx;
      // background: ;
    }
    .right_info {
      .url_class {
        width: 410rpx;
        flex-grow: 1;
      }
    }
    .radio_group {
      padding: 40rpx;
      background: #fff;
      .radio_item {
        &:not(:last-child) {
          margin-bottom: 20rpx;
        }

        .text2 {
          font-size: 26rpx;
          color: #999;
        }
      }
    }
    .iconfont {
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 30rpx;
    }
  }
}
</style>
